<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">{{txt}}</h2>
    <button class="btn">提交</button>
  </header>
  <div class="page">
    <ul class="mine-list mb20">
      <li class="displayflex gray">
        <span class="flex1">计划{{txt}}</span>
        <span>{{mainlist.OrdersPKGS}}件</span>
      </li>
      <li class="displayflex">
        <span class="flex1">实际{{txt}}</span>
        <span><input type="tel" placeholder="请输入" class="txt-rit ft16" v-model="conPKGS">件</span>
      </li>
    </ul>
    <div class="form-box" v-if="step=='2'">
      <div class="displayflex" @click="goMap(bbilllist.Guid)">
        <div class="label">交货地址</div> 
        <div class="ctx flex1 txt-rit lineTxt">{{mainlist.ArrivalProvince | province}} {{mainlist.ArrivalCity | city}} {{mainlist.ArrivalDistrict | district}} {{mainlist.ArrivalAddress}}</div> 
        <i class="iconfont icon-right"></i>
      </div>
    </div>
    <div class="detail-num mb20 ft14">
      <p>订单编号：{{bbilllist.BBillNo}}</p>
      <p v-if="mainlist.ConsignTime">取货时间：{{mainlist.ConsignTime | timeshort}}</p>
      <p v-if="mainlist.ReceiveTime">签收时间：{{mainlist.ReceiveTime | timeshort}}</p>
      <p v-if="mainlist.LastArrivalArrivedDate" id="arrData">要求到达时间：{{mainlist.LastArrivalArrivedDate | timeshort}}</p>
    </div>
    <div class="form-wrap2 mb20">
      <p class="txt">上传{{txt}}凭证</p>
      <uploader-imgs :word="'凭证'" v-model="picJson" :list="picJson"></uploader-imgs>
    </div>
    <div class="form-box displayflex">
      <div class="label">备注</div>
      <div class="ctx flex1">
        <textarea placeholder="请输入" v-model="Memo"></textarea>
      </div>
    </div>
  </div>
  
  <div class="btn-bottom" v-if="step == '1'"><div class="btn" @click="preCheckState">提交</div></div>
  <div class="btn-bottom" v-else><div class="btn" @click="preCheckState">确认交货</div></div>
  
  <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', 'background-color': '#fff'}">
    <div class="qr-code">
      <p class="tit ft17">扫码签收<i class="iconfont icon-close" @click="showDialogStyle=false;"></i></p>
      <div class="ctx">
        <qrcode :value="valueurl" :size="200"></qrcode>
      </div>
      <p class="tip ft17">扫二维码快速完成订单签收</p>
    </div>
  </x-dialog>
</div>
</template>

<script>
import uploaderImgs from "@/components/share/uploaders.vue";
export default {
  components: {
    uploaderImgs
  },
  data() {
    return {
      Memo: "",
      bbilllist: [],
      mainlist: [],
      goodslist: [],
      HandOver: [],
      bbillno: "",
      showLoad: true,
      conPKGS: "",
      picJson: {
        imgLista: [],
        imgListBase: []
      },
      showDialogStyle: false,
      valueurl: ""
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    },
    step() {
      return this.$route.query.step;
    },
    txt() {
      return this.step == "1" ? "取货" : "交货";
    },
    state() {
      return this.step == "1" ? "52" : "56";
    }
  },
  watch: {
    showDialogStyle(val) {
      if(!val)
      {
        this.$router.push({
          path: "/awaitList",
          query:{type: this.$route.query.step}
        });
      }
    }
  },
  methods: {
    goMap(id) {
      this.$router.push({
        path: "/map",
        query: { id: id }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    preCheckState() {
      this.showLoad = true;
      var _this = this;
      var query = {
        Guid: _this.$route.query.id,
        State: _this.state,
        PresentState: _this.mainlist.State,
        RowNo: "1"
      };
      _this.Ajax.post("PreCheckState", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          _this.next();
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        }
      });
    },

    next() {
      this.showLoad = true;
      var _this = this;
      var query = {
        Guid: _this.$route.query.id,
        ConPKGS: _this.conPKGS,
        RowNo: "1",
        Memo: _this.Memo,
        State: _this.state,
        LoginedStaffID: _this.userinfo.StaffID,
        LoginedName: _this.userinfo.Name,
        ImgUrlList: _this.picJson.imgListBase,
        ImgUrlOrgList: _this.picJson.imgLista
      };
      this.Ajax.post("ReceivingConfirm", query).then(function(resp) {
        _this.showLoad = false;
        if (_this.step == "1") {
          var time = document.getElementById("arrData").innerHTML;
          var txt = "取货成功，请务必确保在" + time + "前送达！";
        }
        if (resp.IsSuccess) 
        {
          if(_this.step == "1") //取货
          {
            _this.$vux.toast.show({
              type: "success", //success, warn, cancel, text
              text: txt || _this.txt + "完成",
              onHide() {
                _this.$router.push({
                  path: "/driver"
                });
              }
            });
          };

          if(_this.step == "2") //交货
          {
            var qr = {
              r: _this.$route.query.id,
            };
            _this.valueurl = JSON.stringify(qr);
            _this.showDialogStyle = true;
            _this.$vux.toast.show({
              type: "success", //success, warn, cancel, text
              text: "交货完成",
            });
          }
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
          // _this.$router.push({
          //   path: "/driver"
          // });
        }
      });
    },
    getData() {
      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetail", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist = resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.HandOver = resp.Data.HandOver;
          self.conPKGS = self.mainlist.OrdersPKGS;
          // if(self.HandOver && userinfo.UserBizType != 'Driver')
          // {
          //   self.picJson.imgLista = JSON.parse(self.HandOver.HandoverPict);
          // }
        }
      });
    }
  }
};
</script>